<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<div class="col-md-9" >
    <div class="data_list" style="border-radius: 15px">
        <div class="data_list_title">
            <span class="glyphicon glyphicon-edit"></span>&nbsp;个人中心
        </div>
        <div class="container-fluid">
            <div class="row" style="padding-top: 20px;">
                <div class="col-md-8">
                    <%--
                        表单类型  enctype="multipart/form-data"
                        提交方式  method="post"
                    --%>
                    <form class="form-horizontal" method="post" action="user" enctype="multipart/form-data" >
                        <div class="form-group">
                            <%-- 设置隐藏域存放用户行为actionName --%>
                            <input type="hidden" name="actionName" value="updateUser">
                            <label for="nickName" class="col-sm-2 control-label">昵称:</label>
                            <div class="col-sm-3">
                                <input class="form-control" name="nick" id="nickName" placeholder="昵称" value="${user.nick}">
                            </div>
                            <label for="img" class="col-sm-2 control-label">头像:</label>
                            <div class="col-sm-5">
                                <input type="file" id="img" name="img" accept=".png, .jpg, .jpeg" placeholder="JPG PNG JPEG">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mood" class="col-sm-2 control-label">心情:</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" style="resize: none;" name="mood" id="mood" rows="3">${user.mood}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" id="btn" class="btn btn-success" onclick="return updateUser();">修改</button>&nbsp;&nbsp;
                                <span style="color:red; font-size: 12px;" id="msg"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-md-4"><img id="img_old" style="border-radius: 100px;width:200px;height:200px" src="user?actionName=userHead&imageName=${user.head}"></div>
            </div>
        </div>

    </div>

    <div class="data_list" style="float:left;border:1px;width:100%;background-color: #F0F0F0;padding: 0">



    <div class="data_list" style="border-radius: 15px;width: 49%;background-color: #ffffff;float:left;">
        <div class="data_list_title"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改密码 </div>
        <div class="container-fluid" style="width: 100%;">
            <div class="row" style="padding-top: 20px;width: 100%;">
                <div class="col-md-8" style="width: 100%;">
                    <%--
                        表单类型  enctype="multipart/form-data"
                        提交方式  method="post"
                    --%>
                    <form class="form-horizontal" method="post" action="user"  >
                        <div class="form-group" style="">
                            <%-- 设置隐藏域存放用户行为actionName --%>
                            <input type="hidden" name="actionName" value="updatePwd">
                            <label for="nickName" class="col-sm-2 control-label" style="width: 25%;">原密码:</label>
                                <input class="form-control" style="width: 50%;" name="old_pwd" type="password" id="old_pwd" placeholder="原密码" >

                                <br>
                            <label class="col-sm-2 control-label" style="width: 25%;" >新密码:</label>
                                <input class="form-control" style="width: 50%" type="password" id="new_pwd1" name="new_pwd"  placeholder="新密码 6-16位数字字母">
                                <br>
                                <label class="col-sm-2 control-label" style="width: 25%;">重复:</label>
                                <input class="form-control" style="width: 50%" type="password" id="new_pwd2" name="new_pwd2"  placeholder="重复密码 6-16位数字字母">
                                <br>
                                <button type="submit" id="btn2" class="btn btn-success" style="margin-left: 100px" onclick="return updatePwd();">修改</button>&nbsp;&nbsp;
                                <span style="color:red; font-size: 20px;" id="msg2">${resultInfo1.getMsg()}</span>


                        </div>

                    </form>
                </div>
            </div>
        </div>

    </div>

    <div class="data_list" style="border-radius: 15px;width: 49%;margin-left: 2%;float:left;border:1px;background-color: #ffffff">
        <div class="data_list_title"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改邮箱 </div>
        <div class="container-fluid" style="width: 100%">
            <div class="row" style="padding-top: 20px;width: 100%">
                <div class="col-md-8" style="width: 100%">
                    <%--
                        表单类型  enctype="multipart/form-data"
                        提交方式  method="post"
                    --%>
                    <form class="form-horizontal" method="post" action="user"  >
                        <div class="form-group">
                            <%-- 设置隐藏域存放用户行为actionName --%>
                            <input type="hidden" name="actionName" value="updateEmail">
                            <label for="nickName" class="col-sm-2 control-label" style="width: 25%;">原邮箱:</label>
                                <input class="form-control" style="width: 50%"  type="email" id="old_email" disabled="disabled" value="${user.email}">

                            <br>
                            <label class="col-sm-2 control-label" style="width: 25%;">新邮箱:</label>
                            <input class="form-control" style="width: 50%" type="email" id="email" name="email"  placeholder="新邮箱">
                            <br>
                            <%--<label for="mood" class="col-sm-2 control-label" style="width: 25%;">重复:</label>--%>
                            <input class="form-control" style="width: 30%;float: left;margin-left: 10%" type="number" id="code" name="code"  placeholder="验证码"/><input type="button" id="getCode" class="btn btn-success" style="margin-left: 3%;width: 32%" value="获取验证码" onclick="getCode_()"/>
                            <br><br>
                            <button type="submit" id="btn3" class="btn btn-success" style="margin-left: 100px" onclick="return updateEmail();">修改</button>&nbsp;&nbsp;
                            <span style="color:red; font-size: 20px;" id="msg3">${resultInfo2.getMsg()}</span>

                        </div>

                    </form>
                </div>
            </div>
        </div>

    </div>
    </div>

</div>

<script type="text/javascript">
    /**
     * 验证昵称的唯一性
        昵称文本框的失焦事件  blur
            1. 获取昵称文本框的值
            2. 判断值是否为空
                如果为空，提示用户，禁用按钮，并return
            3. 判断昵称是否做了修改
                从session作用域中获取用户昵称 （如果在js中想要使用el表达式获取域对象，js需要写在JSP页面中，无法在js文件中获取）
                如果用户昵称与session中的昵称一致，则return
            4. 如果昵称做了修改
                发送ajax请求后台，验证昵称是否可用
                     如果不可用，提示用户，并禁用按钮
                     如果可用，清空提示信息，按钮可用

         昵称文本框的聚焦事件  focus
             1. 清空提示信息
             2. 按钮可用
     */

    //实时显示选择的图片
    var getUserPhoto = document.getElementById("img");
    getUserPhoto.onchange = function ()
    {
        var file = this.files;
        console.log(file);
        var reader = new FileReader();
        reader.readAsDataURL(file[0]);
        reader.onload = function ()
        {
            var image = document.getElementById("img_old");
            image.src = reader.result;
            $("#msg").html("点击修改更换头像")
        };
    };



    $("#nickName").blur(function (){
        // 1. 获取昵称文本框的值
        var nickName = $("#nickName").val();
        // 2. 判断值是否为空
        if (isEmpty(nickName)) {
            //  如果为空，提示用户，禁用按钮，并return
            $("#msg").html("用户昵称不能为空！")
            //$("#btn").prop("disabled", true);
            return;
        }
        // 3. 判断昵称是否做了修改
        // 从session作用域中获取用户昵称
        var nick = '${user.nick}';
        // 如果用户昵称与session中的昵称一致，则return
        if (nickName == nick) {
            return;
        }
        // 4. 如果昵称做了修改
        // 发送ajax请求后台，验证昵称是否可用
        $.ajax({
            type:"get",
            url:"user",
            data:{
                actionName:"checkNick",
                nick:nickName
            },
            success:function (code) {
                // 如果可用，清空提示信息，按钮可用
                if (code == 1) {
                    // 1. 清空提示信息
                    $("#msg").html("")
                    // 2. 按钮可用
                    $("#btn").prop("disabled", false);
                } else if(code == 2){
                    // 1. 清空提示信息
                    $("#msg").html("图片类型仅支持 PNG JPG JPEG，请修改图片类型")
                    // 2. 按钮可用
                    $("#btn").prop("disabled", true);
                    $("#img").html("")
                }
                else { // 如果不可用，提示用户，并禁用按钮
                    // 1. 清空提示信息
                    $("#msg").html("该昵称已存在，请重新输入！")
                    // 2. 按钮可用
                    $("#btn").prop("disabled", true);
                }
            }
        });
    }).focus(function (){
        // 1. 清空提示信息
        $("#msg").html("")
        // 2. 按钮可用
        $("#btn").prop("disabled", false);
    });


    function updateEmail(){
        var e = $("#email").val();
        var c = $("#code").val();

        if (isEmpty(e) || isEmpty(c) || c.length !== 6){
            //  如果为空，提示用户，禁用按钮，并return
            $("#msg3").html("信息不可为空！")
            return false;
        }
        return true;
    }


    /**
     * 表单提交校验
     *      满足条件，返回true，表示提交表单
     *      不满足条件，返回false，表示不提交表单
     * @returns {boolean}
     */
    function updateUser() {

        // 获取昵称文本框的值
        var nickName = $("#nickName").val();
        var mood = $("#mood").val();
        // 判断值是否为空
        if (isEmpty(nickName)) {
            //  如果为空，提示用户，禁用按钮，并return
            $("#msg").html("用户昵称不能为空！")
            //$("#btn").prop("disabled", true);
            return false;
        }

        if (nickName.length > 30 || mood.length > 60){
            //  长度限制
            $("#msg").html("昵称不可超过30位心情不可超过60位！")
            //$("#btn").prop("disabled", true);
            return false;
        }

        // 唯一性 TODO

        return true;
    }

    function updatePwd() {
        var oldPwd = $("#old_pwd").val();
        var new_pwd1 = $("#new_pwd1").val();
        var new_pwd2 = $("#new_pwd2").val();

        if(oldPwd != null && oldPwd.length>0 && new_pwd1 != null && new_pwd1.length > 5 && new_pwd1.length < 17 && new_pwd1 === new_pwd2){
            return true;
        }

        $("#msg2").html("信息异常！")
        //$("#btn2").prop("disabled", true);
        return false;

    }

</script>
